<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>请求后台接口测试</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-1.12.4.min.js"></script>
<style>
    body{
        cursor: default;
    }
    body .table{
        max-width: 1000px; margin: 0 auto;
    }
    h3{
        text-align: center;
    }
</style>
</head>
<body>
    <h3>单个接口测试工具V1.0</h3>
    <table class="table table-condensed table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th colspan="2" class="danger"><h4>1、选择请求的方法，暂只支持2种</h4></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">
                    <select class="input-lg form-control" id="requst-type">
                        <option selected="">get</option>
                        <option>post</option>
                    </select>
                </td>
            </tr>
        </tbody>
        <thead>
            <tr>
                <th colspan="2" class="danger"><h4>2、填写请求的地址</h4></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2" class="input-group-lg"><input id="requst-url" class="form-control" type="text" name=""></td>
            </tr>
        </tbody>
        <thead>
            <tr>
                <th class="danger"><h4>3、填写请求的key和value（key为空，则忽略）</h4></th>
                <th class="danger"><button class="list-group-item list-group-item-success active" id="add-btn">点击增加</button></th>
            </tr>
        </thead>
        <tbody id="key2value">
            <tr>
                <td>
                    <div class="input-group input-group-lg">
                        <span class="input-group-addon">key：</span>
                        <input type="text" class="form-control" placeholder="key" aria-describedby="basic-addon1">
                    </div>
                </td>
                <td>
                    <div class="input-group input-group-lg">
                        <span class="input-group-addon">value：</span>
                        <input type="text" class="form-control" placeholder="value：" aria-describedby="basic-addon1">
                    </div>
                </td>
            </tr>
        </tbody>
        <thead>
            <tr>
                <th colspan="2" class="danger"><h4>4、选择返回类型，暂只支持json、jsonp</h4></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">
                    <select class="input-lg form-control" id="requst-across">
                        <option selected="">json</option>
                        <option>jsonp</option>
                    </select>
                </td>
            </tr>
        </tbody>
        <thead>
            <tr>
                <th colspan="2" class="danger"><h4>5、点击按钮，请求接口</h4></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2" class="success"><button class="list-group-item list-group-item-success active" id="go-ajax">GO</button></td>
            </tr>
        </tbody>
        <thead>
            <tr>
                <th colspan="2" class="danger"><h4>6、输出结果（拖动右下角小三角，调整显示）</h4></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">
                    <textarea id="printout" class="form-control input-lg"></textarea>
                </td>
            </tr>
        </tbody>
    </table>
    <script>
        (function(){
            // ajax请求
            var $goAjax = $('#go-ajax'),
                $requstUrl = $('#requst-url'),
                $key2value = $('#key2value'),
                $requstType = $('#requst-type'),
                $requstAcross = $('#requst-across');
            // 增加
            var $addBtn = $('#add-btn');
            // 结果输出
            var $printout = $('#printout');

            var job = {
                init:function(){
                    var self = this;
                    $goAjax.on('click', function(){
                        var url = $requstUrl.val(),
                            type = $requstType.val(),
                            data = self.config(),
                            dataType = $requstAcross.val();
                        if(!url){
                            alert('大哥，你难道不写个请求的地址吗？卧槽');
                            return;
                        }
                        self.execAjax(url, type, data, dataType);
                    });

                    $addBtn.on('click', function(){
                        self.addData();
                    });
                },
                execAjax:function(url, type, data, dataType){
                    var self = this;
                    $.ajax({
                        url:url,
                        type:type,
                        data:data,
                        dataType:dataType
                    }).done(function(msg, textStatus, jqXHR){
                        self.print('状态:'+textStatus + '\n\n******************************我是分隔符***********************我是分隔符***************************\n\n' + '返回的内容:\n'+JSON.stringify(msg));
                    }).fail(function(jqXHR, textStatus){
                        alert(textStatus);
                    });
                },
                print:function(result){
                    $printout.val(function(){
                        return result;
                    });
                },
                config:function(){
                    var data = {};
                    $key2value.find('tr').each(function(index, el){
                        if($(this).children('td').find('input')[0].value){
                            data[$(this).children('td').find('input')[0].value] = $(this).children('td').find('input')[1].value;
                        }
                    });
                    return data;
                },
                addData:function(){
                    var length = $key2value.children('tr').length;
                    $key2value.append($key2value.children('tr').eq(length-1).clone());
                }
            }

            job.init();
        })();
    </script>
</body>
</html>